import { useEffect, useState } from 'react'
function Paging (props) {
    let { nextPage, prvePage, jumpPage, currentPage, pageChange,totalCount,pageSize,addUnit } = props
    let [page, setPage] = useState(currentPage)
    let [pages, setPages] = useState([])
    function next(){
        nextPage()
        if(page + 1 <= totalCount/pageSize){
            setPage(page + 1)
        }
    }
    function prve(){
        prvePage()
        if(page - 1 > 0){
            setPage(page - 1)  
        }
    }
    function jump(num){
        jumpPage(num)
        setPage(num)
    }
    function nextIndex(lastIndex){
        if(lastIndex + addUnit <= totalCount/pageSize)
            setPages(pages.map(val=>val+addUnit))
        else{
            let unit = totalCount/pageSize - lastIndex
            setPages(pages.map(val=>val+unit))
        }
    }
    function prveIndex(headIndex){
        if(headIndex - addUnit >= 0)
            setPages(pages.map(val=>val-addUnit))
        else
            setPages(pages.map((val, idx)=>idx + 1))
    }
    function changeIndex(){
        let headPage =  pages[0]
        let lastPage = pages[pages.length - 1]
        if(page < headPage){
            // 如果上一页之后小于了headPage
            prveIndex(headPage)
        }
        if(page > lastPage){
            // 如果下一页之后小于了lastPage
            nextIndex(lastPage)
        }
    }
    useEffect(()=>{
        let arr = new Array(parseInt(totalCount/pageSize)>10?10:Math.floor(totalCount/pageSize)).fill(0)
        arr = arr.map((val,idx)=>{
            return idx + 1
        })
        setPages(arr)
        return ()=>{}
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    useEffect(()=>{
        pageChange(page)
        changeIndex()
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[page])
    useEffect(()=>{
        if(!pages.includes(page))
            setPage(pages[0])
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[pages])
    return<>
        <div className='table-bottom'>
            <div className='table-info'>
                {`共${totalCount}条，${parseInt(totalCount/pageSize)}页`}
                {/* <input /> */}
            </div>
            <div className="paging">
                <Block 
                    class = 'prve numberBlcok-btn'
                    onClick = {()=>prveIndex(pages[0])}
                >
                    <i className='iconfont icon-xiayixiang'></i>
                </Block>
                <Block
                    onClick={prve}
                    class='prve numberBlcok-btn'
                >
                    <i className='iconfont icon-ziyuanxhdpi'></i>
                </Block>
                {
                    pages.map((val, idx)=>{
                        return <Block class={`${page === val && 'active'}`} onClick={()=>jump(val)} key={Math.random()}>{parseInt(val) }</Block>
                    })
                }
                <Block
                    onClick={next}
                    class='next numberBlcok-btn'
                >
                    <i className='iconfont icon-ziyuanxhdpi'></i>
                </Block>
                <Block 
                    class = 'next numberBlcok-btn'
                    onClick={()=>nextIndex(pages[pages.length-1])}
                >
                    <i className='iconfont icon-xiayixiang'></i>
                </Block>
            </div>
        </div>
    </>
}
function Block (props) {
    return <div key={props.class} className={`numberBlcok ${props.class || '' }`} onClick={()=>{
        if(props.onClick)
            props.onClick()
    }}>
        {props.children}
    </div>
}

export default Paging